<template>
  <div>
    <el-header class="el-header2" height="35px">
      <el-breadcrumb
        style="margin-left: 10px"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>

    <el-card>
      <div class="tableContainer">
        <el-table :data="orderList" border style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column
            align="center"
            prop="goods_id"
            label="商品id"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="goods_name"
            label="商品名称"
            width="140"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="order_number"
            label="订单编号"
            width="320"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="order_price"
            label="商品价格"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="pay_status"
            label="是否付款"
            width="100"
          >
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.pay_status === '0'"
                >未付款</el-tag
              >
              <el-tag
                size="mini"
                v-if="scope.row.pay_status === '1'"
                type="success"
                >已付款</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="order_fapiao_title"
            label="个人/公司"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="order_fapiao_company"
            label="个人/公司 -- 名称"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="order_pay"
            label="付款方式"
            width="100"
          >
            <!-- 0现金 1支付宝 2微信 3银行卡 -->
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.order_pay === '0'"
                >现金</el-tag
              >
              <el-tag size="mini" v-if="scope.row.order_pay === '1'"
                >支付宝</el-tag
              >
              <el-tag size="mini" v-if="scope.row.order_pay === '2'"
                >微信</el-tag
              >
              <el-tag size="mini" v-if="scope.row.order_pay === '3'"
                >银行卡</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column align="center" label="货源地" width="100">
            <template v-slot="scope">
              <el-button type="primary" size="small" @click="getbase(scope.row)"
                >货源地</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 货源地对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="hand"
    >
      <el-card>
        <el-table :data="baseinfo" border stripe>
          <el-table-column
            prop="base_location"
            label="货源地"
          ></el-table-column>
          <el-table-column prop="base_owner" label="发货人"></el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      orderList: [],
      baseinfo: [],
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    async getbase(info) {
      // console.log(info);
      const { data } = await this.axios({
        method: "get",
        url: `/order/base/${info.order_id}`,
      });
      console.log(data);
      this.baseinfo = data.data;
      this.dialogVisible = !this.dialogVisible;
    },
    hand() {
      this.dialogVisible = !this.dialogVisible;
    },
    async getOrderList() {
      const { data } = await this.axios({
        method: "get",
        url: `/order`,
      });
      this.orderList = data;
      console.log(data);
    },
  },
};
</script>
